<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0; margin: 0;}        
        #box{
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <ul class="item">
        <li>1</li>
        <li>2</li>
        <li>3</li>  
        <!-- aa -->
    </ul>
    <div class="box">
        <ul id="list">
            <li>ECMAScript</li> 
            <li>BOM</li>
            <li>DOM</li>
        </ul>
        <!-- 换行 文本节点 li标签与下一个li标签-->
    </div>
    <!-- <button id="btn" onclick="go()">toBaidu</button> -->
    <button id="btn">更改按钮内容</button>
    <button id="start">开始</button><!-- 换行空格 属于文本节点 -->

    <!-- 没有空格
    <button id="btn">toBaidu</button><button id="btn">toBaidu</button> -->
    <div id="box" class="box">
        ghlab
        <p>s</p>
    </div> 
    <div id="box3">gjj</div> 

    <script>
        var start = document.getElementById('start');
        var box = document.getElementById('box');
        var timer; //全局变量
        start.onclick = function(){
            timer = setInterval(function(){
                var date = new Date();
                var time = date.toLocaleTimeString();
                box.innerHTML = time;
            },1000)
        }
        // 想要划上去就停止计时
        box.onmouseover = function(){
            clearInterval(timer);
        }
    </script>

    <script>
        // innerHTML
        var box = document.getElementById('box');
        box.onclick = function(){
            // console.log(this.innerHTML) // 标签文本
            // console.log(this.innerText) //只拿文本
            // this.innerHTML = '<h1>hello</h1>'
            // this.innerText = '<h1>hello</h1>' //识别不出来标签
            this.innerHTML += '<h1>hello</h1>' //累加
        }

        console.log(box.childNodes)
        var box3 = document.getElementById('box3');
        console.log(box3.childNodes);
    </script>

    <script>
        //节点关系
        var ul = document.getElementsByClassName('item')[0];
        var ulList = document.getElementsByClassName('item')[0].children;
       
        // var ul = document.getElementById('list');
        // var list = ul.children;

        // var list = ul.getElementsByTagName('li');
        for(var i=0;i<ulList.length;i++){
            ulList[i].onclick = function(){
                console.log(this.nextElementSibling&&this.nextElementSibling.innerHTML)
                // 没有this.nextElementSibling&& 会报错
                // console.log(this); // 返回list
            }
        }
        console.log(ul.childNodes)
        // text, li, text, li, text, li, text, comment, text   （text是换行空格）
        console.log(ul.children) 
        // 元素节点

    </script>


    <!-- script在所有代码的后面如果在head里写的话会先加载script找不到btn等值为null -->
    <script>
        // 进行DOM操作必须要先获取这个节点
        //DOM节点是一个对象，拥有属性和方法
        // 元素节点 HTML开始标签中的属性为元素节点对象的属性
        // 元素节点 HTML开始标签中的事件属性为元素节点对象的方法
        // 元素节点对象中的方法函数中的this指向当前触发事件的元素
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            console.log(123)
            console.log(this)  //函数中的this是调用这个函数的对象指向btn
            this.innerHTML = 'abcdefg'; //点击之后按钮内容变为abcdefg
        }
        // 实现了与标签无关直接通过var btn这个来进行改变
        console.log(btn)
        console.dir(btn)   //获取属性 console.log(this)结果与这个一样

        // 标签
        var list = document.getElementsByTagName('li');
        console.log(list)

        // 类名
        // 哪怕只有一个元素是item返回的也是类数组
        // 可以通过[0]去访问
        var lis = document.getElementsByClassName('item');
        console.log(lis)
        var lis = document.getElementsByClassName('item')[0];
        console.log(lis)


        // 普通DOM节点上也有getElementsByClassName和getElementsByTagName没有getElementById
        // getElementsByClassName和getElementsByTagName方法返回的是类数组的变量
        // 有length属性，也可以通过索引访问，但是没有数组的push，pop等方法
        var ul = document.getElementById('list');
        var list = ul.getElementsByTagName('li');
        console.log(list)
        // list不能直接调用onclick因为list中的每一个元素才是元素节点
        for(var i=0;i<list.length;i++){
            list[i].onclick = function(){
                console.log(this); // 返回list
            }
        }
        
    </script>
</body>
</html>